<template>
	<div class="rp-page abs-page">
		<Head navTitle="我的团队" />
		<div class="page-container ">
			<div class="team-m-preivew">
				<el-popover placement="bottom" width="360" trigger="click" ref="popoverRef">
					<div class="tm-top-dropdown">
						<div class="tm-text">下线人数</div>
						<div class="tm-drop-row" @click="level(1)">
							<div class="flex_bd">
								<div class="text">1级会员</div>
							</div>
							<div class="tm-value">205</div>
						</div>
						<div class="tm-drop-row" @click="level(2)">
							<div class="flex_bd">
								<div class="text">2级会员</div>
							</div>
							<div class="tm-value">205</div>
						</div>
						<div class="tm-drop-row" @click="level(2)">
							<div class="flex_bd">
								<div class="text">3级会员</div>
							</div>
							<div class="tm-value">205</div>
						</div>
					</div>
					<div slot="reference" >
						<div class="val">308</div>
						<div class="t-v">团队总人数 <i class="iconfont icon-down"></i></div>
					</div>
				</el-popover>
			</div>
			<div class="rp-main m-wrapper">
				<div class="team-search">
					<el-input
					placeholder="搜索"
					v-model="searchV">
						<i slot="suffix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</div>
				<!-- 一级 demo -->
				<div class="team-list-cell flex-center" v-for="item in lists" :key="item" @click="goUrl('/teamDetail')">
					<div class="t-avatar">
						<img src="../../assets/images/default.png">
					</div>
					<div class="flex_bd">
						<div class="t-item">Jane’s 007</div>
						<div class="t-item">{{item.level}}</div>
					</div>
					<div class="time">2021-09-10</div>
					<div class="iconfont icon-right"></div>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				hcur: '0',
				searchV:'',
				lists:[
					{
						level:'Level 1'
					},
					{
						level:'Level 1'
					},
					{
						level:'Level 1'
					},
					{
						level:'Level 1'
					}
				]
			};
		},
		methods: {
			goUrl(url){
				this.$router.push(url);
			},
			level(e){
				if(e == 1){
					this.lists = [
						{
							level:'Level 1'
						},
						{
							level:'Level 1'
						},
						{
							level:'Level 1'
						},
						{
							level:'Level 1'
						}
					]
				}
				if(e == 2){
					this.lists = [
						{
							level:'Level 2'
						},
						{
							level:'Level 2'
						},
						{
							level:'Level 2'
						},
						{
							level:'Level 2'
						}
					]
				}
				if(e == 3){
					this.lists = [
						{
							level:'Level 3'
						},
						{
							level:'Level 3'
						},
						{
							level:'Level 3'
						},
						{
							level:'Level 3'
						}
					]
				}
				this.$refs.popoverRef.doClose();
			}
		}
	}
</script>
